<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="width: 80vw; margin: auto; ">
            <div>
                就诊时间： <el-date-picker v-model="date" value-format="YYYY-MM-DD" type="date" placeholder="统计时间" />
                <el-button type="primary" size="default" @click="getData">测试</el-button>
            
            </div>
            <div style="margin-top: 30px;">
                <el-card shadow="always" :body-style="{ padding: '20px' }">
                    <template #header>
                        <div>
                            <span>人次</span>
                        </div>
                    </template>
                    <div v-if="aggchats" ref="aggstats" style="width: 100%; height: 40vh;">

                    </div>
                </el-card>

            </div>
            <el-table :data="agedatename">
                <el-table-column type="index" width="50" />
                <el-table-column label="年龄段" prop="aname" >
                    <template #default="scope">
                        {{ scope.row.aname == 80 ? "80岁以上" : (scope.row.aname < 100 ? scope.row.aname+"-"+( parseInt(scope.row.aname)+ 9 )+'岁' : '合计' ) }}
                        <!--  -->
                    </template>
                </el-table-column>
                <el-table-column label="人次" prop="amount" />
            </el-table>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { listJob } from "../../../../api/statistics/test"
import { getpatientstats } from "../../../../api/report/patientstats"
const aggstats = ref()
const aggchats = ref(true)
const date = ref("")
const agedate = ref([] as any)

const allamount = ref({
    aname:"合计",
    amount:0
})
const agedatename = ref([
    
])
function setec(){
    var rateChart  = echarts.dispose(aggstats.value)

if (rateChart != null && rateChart != "" && rateChart != undefined) {
        rateChart.dispose();//销毁
 }
   var aggstatsV = echarts.init(aggstats.value)
    var option ={
        xAxis: {
            type: 'category',
            data: ['0-9', '10-19', '20-29', '30-29', '40-49', '50-59', '60-69','70-80', '大于80']
        },
        tooltip: {
					trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
					axisPointer: {// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: agedate.value,
                type: 'bar'
            }
        ]
    }
    aggstatsV.setOption(option,true)
}

function formaData(timer) {
    const year = timer.getFullYear()
    var month = timer.getMonth() + 1 // 由于月份从0开始，因此需加1
    var day = timer.getDate() 
    month = month + '';
    if (month.length == 1) {
        month = "0" + month;
    }
    var datt = year + "-" + month + "-" + day;
    return datt
}
const getData = async () => {
    const res = await getpatientstats(date.value)
    agedate.value =[]
    agedatename.value=[]
    allamount.value.amount = 0;
    res.data.forEach(element => {
        allamount.value.amount = allamount.value.amount + parseInt(element.amount)
        agedate.value.push(element.amount)
    })
    agedatename.value.push(allamount.value)
    res.data.forEach(item=>{
        agedatename.value.push(item)
    })
    setec()
}
 onMounted(async () => {
    date.value = formaData(new Date())
    await getData()
})

</script>

<style scoped></style>